import React,{useEffect, useState} from 'react'
import {fetchItemDetail} from '@a/index'
import {useNavigate, useLocation} from 'umi'
import { Swiper} from 'antd-mobile'
import './style.scss'
import HeaderDetail from './components/headerDetail'
import FlootDetail from './components/FlootDetail'
export default function home() {
const location = useLocation()
const [pics, setPics] = useState([])//图片
const [category, setcategory] = useState('')
const [basicInfo, setBasicInfo] = useState({})

//商品详情的请求接口
const fetchItemDetailed = (params = {}) => {
  fetchItemDetail(params).then(res => {
    console.log(res);
    
    if (res.data.code === 0) {
      setPics(res.data.data.pics)
      setcategory(res.data.data.content)
      setBasicInfo(res.data.data.basicInfo)
    }
  })
}
//商品详情的请求接口

//初始化发送请求
useEffect(() => {
  fetchItemDetailed({id: location.state.id})
}, [])
//初始化发送请求

//商品详情的轮播图
const items = pics.map((color, index) => (
  <Swiper.Item key={color.id}>
  <img src={color.pic} alt="" />
  </Swiper.Item>
))
//商品详情的轮播图

  return (
    <>
    <HeaderDetail/>
    <div className='detail_conten'>
    {/* 商品详情的轮播图 */}
    <Swiper 
    autoplay = {true}
    loop = {true}
    autoplayInterval = {1500}
    className = 'detailSwiper'
    >{items}
    </Swiper>
{/* 商品详情的轮播图 */}

{/* 商品描述和价格 */}
<div className="item_info">
  <p>{basicInfo.name}</p>
  <span>￥{basicInfo.minPrice}</span>
</div>
{/* 商品描述和价格 */}

{/* 商品详情富文本的渲染 */}
<div dangerouslySetInnerHTML={{__html: category}}></div>
{/* 商品详情富文本的渲染 */}
    </div>
    {/* 底部的加入购物车和购买功能 */}
<FlootDetail/>
  {/* 底部的加入购物车和购买功能 */}
   </>
  )
}
